<template lang="html">
  <el-dialog :title="$t('constant.tsl.ADD_TSL')" :close-on-click-modal="false" :visible.sync="addTslShow">
    <el-form ref="TslAddForm" :model="form" label-width="90px" :inline-message="true" :rules="tslFormRules">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('constant.tsl.NAME')" prop="name">
              <el-input v-model.trim="form.name" :placeholder="$t('constant.tsl.NAME_PLACEHOLDER')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('constant.tsl.VERSION')" prop="version">
            <el-input  v-model.trim="form.version" :placeholder="$t('constant.tsl.VERSION_PLACEHOLDER')" maxlength="50"
                      show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('constant.tsl.REMARKS')" prop="remarks">
              <el-input v-model.trim="form.remarks" type="textarea" :rows="5" maxlength="100" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="close" @click="addTslShow = false">{{$t('button.CLOSE')}}</el-button>
      <el-button size="small" type="save" @click="saveTsl" :loading="addTslLoading">{{$t('button.SAVE')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {DataMainApi, Status} from '../ApiConstant'

  export default {
    data() {
      var self = this
      var validateTslName = (rule, value, callback) => {
        //支持中文、英文字母、数字、下划线（_）
        var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
        if (reg.test(self.form.name)) {
          if(self.form.tslId!==null&&self.form.tslId!='') {
            self.$http.get(`${DataMainApi}/tsl/validate/${self.form.name}/u`)
              .then(res => {
                if (res.data.code === Status.success) {
                  callback()
                } else {
                  callback(new Error(self.$t('constant.tsl.NAME_EXIST_NOTIFY')))
                }
              })
          }else{
            callback();
          }
        } else {
          var errorMsg = self.$t('constant.tsl.VALIDATE_NAME_PATTERN');
          callback(new Error(errorMsg))
        }
      }
      var validateVersion=(rule, value, callback) =>{
        var reg=/(^\s*)|(\s*$)/;
        if(reg.test(self.form.version)){
            callback()
        }else{
          var errorMsg = self.$t('constant.device.ERROR_SN_MSG');
          callback(new Error(errorMsg))
        }
      }
      return {
        form: {
          name: null,
          version: null,
          remarks: null,
          type: 1
        },
        // 表单验证
        tslFormRules: {
          name: [
            {required: true, message: self.$t('constant.tsl.NAME_PLACEHOLDER'), trigger: 'blur'},
            {min: 2, max: 30, message: self.$t('constant.tsl.TW0_TO_30'), trigger: 'blur'},
            {validator: validateTslName, trigger: 'blur'}
          ],
          version: [
            {required: true, message: self.$t('constant.tsl.VERSION_NOEMPTY'), trigger: 'blur'},
            {min: 1, max: 50, message: self.$t('constant.tsl.ONE_TO_50'), trigger: 'blur'},
            // {pattern:/(^\s*)|(\s*$)/g,message:'不支持空格',trigger:'blur'}
            {validator: validateVersion, trigger: 'blur'}
          ]
        },
        addTslShow: false,
        addTslLoading: false
      }
    },
    methods: {
      show() {
        var self = this
        if (this.$refs.TslAddForm) {
          // 重置表单
          self.$refs.TslAddForm.resetFields()
        }
        this.addTslShow = true
      },
      saveTsl() {
        var self = this
        // 校验表单
        self.$refs.TslAddForm.validate(result => {
          self.addTslLoading = true
          if (result) {
            self.$http.post(`${DataMainApi}/tsl`, self.form)
              .then(res => {
                if (res.data.code === Status.success) {
                  self.$notify.success(self.$t('constant.tsl.SAVE_TSL_SUCCESS_NOTIFY'))
                  self.addTslShow = false
                  // 触发事件
                  self.$emit('success')
                } else {
                  self.$notify.error(res.data.message)
                }
                self.addTslLoading = false
              })
              .catch(() => {
                self.addTslLoading = false
              })
          } else {
            self.addTslLoading = false
          }
        })
      }
    }
  }
</script>
